window.onload = function() {
	// 获取所有元素
	var container = document.querySelector(".display");
	var ele_ul = document.querySelector(".display>ul");
	var ele_imgs = document.querySelectorAll(".display>ul>li");
	var pointers = document.querySelectorAll(".pointer ul>li");

	var win_height = window.innerHeight;

	ele_ul.style.height = win_height + "px";
	//	 设置列表高度
	for(var i = 0; i < ele_imgs.length; i++) {
		ele_imgs[i].style.minHeight = win_height + "px";
	}

	function switch_pointer() {
		for(var i = 0; i < pointers.length; i++) {
			pointers[i].style.background = "#666";
			pointers[i].style.borderColor = "#ccc";
		}
		pointers[index].style.background = "#ccc";
		pointers[index].style.borderColor = "#666";
	}

	// 图片滚动效果
	var index = 0;
	var next = true;
	switch_pointer();

	/* 滚动方向 */
	function wheel_trend(e) {
		if(!next) {
			return false;
		}
		var delta = e.wheelDelta | -e.detail;
		if(delta > 0 && index > 0) { // 鼠标滚轮向上滚动
			index--;
		}
		if(delta < 0 && index < 4) { // 鼠标滚轮向下滚动
			index++;
		}
		return true;
	}

	/* 图片滚动 */
	function image_wheel(e) {
		if(wheel_trend(e)) {
			switch_pointer();
			ele_ul.style.transform = "translateY(" + (-win_height * index) + "px)";
			next = false; // 滚动归位
			setTimeout(function() {
				next = true;
			}, 1000);
		}
	}

	/* Chrome & Firefox listener */
	document.addEventListener("mousewheel", image_wheel);
	document.addEventListener("DOMMouseScroll", image_wheel);

}